import React, {Component} from 'react';
import {Button, Card, Select, Space, Table} from 'antd'
import './product.css'
import {getProductList} from "../../api";

//商品
class ProductHome extends Component {
    state = {
        productList:[],//商品列表
        selectedOption:'',//选择框默认值
        list:[],//table列表备用
    }
    handleProductList =async ()=>{
        const result =await getProductList()
        console.log(result.data.data,'result')
        this.state.productList=result.data.data
        this.state.list=result.data.data
        this.setState(result.data.data)
    }
    componentWillMount() {
        this.handleProductList()
    }
    handleChange=(value: string)=>{
        const {productList,list} = this.state
        if(value){
            const list=productList.filter((item)=>value==item.id)
            console.log(list,list.productName,'list')
            //刷新列表数据
            this.setState({productList:list,selectedOption:list[0].productName})
        }else{
            //恢复筛选前数据
            this.setState({productList:list,selectedOption:''})
        }
    }
    handleCancel=()=>{
        this.handleChange()
    }
    changeStatus=(value)=>{
        //查询修改的数据，并刷新页面
        const {productList,list} = this.state
        productList.forEach((item)=>{
            if(item.id==value.id){
                item.status=value.status=='0'?'1':'0'
            }
        })
        this.setState({productList:productList,list:list})
    }

    detail=(value)=>{
console.log(value)
        // this.props.history.push('/admin/product/detail?id=1')
        this.props.history.push({
            pathname: '/admin/product/detail',
            state: value
        })
    }

    render() {
        const {productList,selectedOption}=this.state
        const columns = [
            {
                title: '商品名称',
                dataIndex: 'productName',
                key: 'productName',
            },
            {
                title: '商品描述',
                dataIndex: 'description',
                key: 'description',
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                render: (item) =>
                    <div style={{textAlign:'center'}}>
                        ¥{item}
                    </div>
            },
            {
                title: '状态',
                dataIndex: '',
                key: 's',
                render: (row,item) =>{
                    return(
                        <div style={{textAlign:'center'}}>
                            <Button type="primary" onClick={()=>{this.changeStatus(item)}}>{item.status==='0'?'下架':'上架'}</Button>
                            <div>{item.status === '0' ? "在售" : "已下架"}</div>
                        </div>
                    )
                }

            },
            {
                title: '操作',
                dataIndex: '',
                key: 'x',
                width: 250,
                render: (item) =>
                    <div>
                        <Button type="link" onClick={()=>{this.detail(item)}}>详情</Button>
                        {/*<Button type="link" style={{marginLeft:20}} onClick={()=>{}}>修改</Button>*/}
                    </div>,
            },
        ];

        return (
            <Space direction="vertical" size={16} style={{width: '100%', height:'100%'}}>
                <Card
                    title={
                        <div className="productHeader">
                            <div>商品名称：</div>
                            <Select
                                value={selectedOption}
                                onChange={this.handleChange}
                                style={{ width: 200 }}
                            >
                                {productList.map((item)=>{
                                    return(
                                        <Select.Option value={item.id} key={item.id}>{item.productName}</Select.Option>
                                    )
                                })

                                }
                            </Select>
                            <Button type='primary' onClick={()=>{this.handleCancel()}} style={{marginLeft:3}}>取消</Button>
                        </div>
                    }
                    style={{
                        width: '100%',
                        height:'100%'
                    }}
                >

                    <Table dataSource={productList} columns={columns} style={{height:"auto"}} scroll={{ y: 610 }} bordered/>
                </Card>
            </Space>
        );
    }
}

export default ProductHome;